<template>
	<div class="consume-class">
		<div class="consume-search">
			<uni-datetime-picker v-model="dataDate" :border="false" type="daterange" :disabled="true" />
			<uni-data-select v-model="coachId" :localdata="coachArr" @change="changeCoach"
				:disabled="type === 1"></uni-data-select>
		</div>
		<table class="record-table" id="tableBody">
			<tr>
				<th>学员姓名</th>
				<th>课程名称</th>
				<th>耗课数量</th>
				<th>当前剩余课时</th>
			</tr>
			<tr v-for="(item, index) in tableData" :key="index" @click="goDetail(item)">
				<td>{{ item.memberUserName }}</td>
				<td>{{ item.courseSnapshotName }}</td>
				<td>{{ item.cnt }}</td>
				<td>{{ item.remainCount }}</td>
			</tr>
		</table>

		<view class="bottom-p">
			<view class="view-detail " @click="goDetail1">耗课详情<i class="dicon-6"></i></view>
		</view>
		<view style="height: 200rpx;"></view>
		<!-- <uni-load-more :status="more"></uni-load-more> -->
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import { selectCoachUsedDetail, coachVisibleList, statisticGroupByMemberUserIdAndSignCourseId } from '@/api/manageApi'
export default {
	data() {
		return {
			page: 1,
			limit: 15,
			totalPage: 1,
			more: 'more',
			tableData: [
				// {number: 8888881, account: '888****88', award: 888888888 }
			],
			coachId: '',
			coachArr: [],
			dataDate: [],
			start: '',
			end: '',
			storeId: '',
			type: 1
		}
	},
	computed: {
		...mapGetters(['userInfo', 'uniToken'])
	},
	//下拉刷新
	onPullDownRefresh() {
		this.page = 1
		this.handleList()
	},
	//上拉加载
	onReachBottom() {
		if (this.page < this.totalPage) {
			this.page++
			this.handleList()
		}
	},
	onLoad(option) {
		this.start = option.start
		this.end = option.end
		this.dataDate = [option.start, option.end]
		if (option.type == 1) {
			this.type = 1
			this.coachArr = [{ text: this.userInfo.userName, value: this.userInfo.userId }]
			this.coachId = this.userInfo.userId
			this.storeId = this.userInfo.storeId
			this.page = 1
			this.handleList()
		} else {
			this.type = 2
			this.getCoachList()
			this.storeId = option.storeId
		}
	},
	methods: {
		goDetail(item) {
			// console.log(item)
			this.goUrl('/pagesA/sign/signCourseDetail?id=' + item.signCourseId)
		},
		changeCoach(e) {
			this.coachId = e
			this.page = 1
			this.handleList()
		},
		getCoachList() {
			var params = {}
			coachVisibleList(params).then(res => {
				// console.log(res)
				if (res.code == '200') {
					var data = res.data
					this.coachArr = data.map((item, index) => {
						return {
							value: item.id,
							text: item.userName
						}
					})
					if (this.coachArr.length > 0) {
						this.coachId = this.coachArr[0].value
					}
					this.page = 1
					this.handleList()
				}
			})
		},
		// 列表接口
		handleList() {
			var params = {
				"coachUserId": this.coachId,
				// coachUserId: '1789133955961491457',
				"current": this.page,
				"end": this.end,
				"ext": {},
				"key": '',
				"orders": [
					{
						"order": "desc",
						"sort": "createTime"
					}
				],
				"saleMode": '',
				"size": this.limit,
				"start": this.start,
				"storeId": this.storeId
			}
			statisticGroupByMemberUserIdAndSignCourseId(params).then(res => {
				// console.log(res)
				
				if (res.code == '200') {
					this.tableData = res.data
				}

				// for(let i = 0; i< 100; i++){
				// 	this.tableData.push({
				// 		memberUserName: 1,
				// 		courseSnapshotName: 2,
				// 		cnt: 3,
				// 		remainCount: 4
				// 	})
				// }

			
			})
		},
		goDetail1 () {
        var url = '/pagesA/data/consumeClass?start=' + this.start + '&end=' + this.end
        this.goUrl(url)
      },
	}
}
</script>

<style lang="scss">
.consume-class {
	background: #fff;

	.record-table {
		width: 100%;
		text-align: center;
		table-layout: fixed;
		empty-cells: show;
		border-collapse: collapse;
		font-size: 28rpx;
		color: #575757;
	}

	.record-table tr {
		display: flex;
	}

	.record-table tr th {
		height: 76rpx;
		line-height: 76rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		background: #FF5D3D;
		font-size: 28rpx;
		color: #FFFFFF;
		font-weight: 400;
		width: 25%;
	}

	.record-table tr td {
		// height: 76rpx;
		// line-height: 76rpx;
		// overflow: hidden;
		// white-space: nowrap;
		// text-overflow: ellipsis;
		width: 25%;
		font-size: 24rpx;
		padding: 10rpx 2rpx;
	}

	

	.record-table tr:nth-child(odd) {
		background: #fff;
	}

	.record-table tr:nth-child(even) {
		background: #FFF3EB;
	}

	.consume-search {
		display: flex;
		padding: 20rpx;

		.uni-date-x {
			margin-right: 30rpx;
		}

		.uni-date__x-input {
			color: #000;
			font-size: 26rpx;
		}
	}
}

.dicon-6{
    width: 10rpx;
    height: 18rpx;
    background: url('../static/d10.png') no-repeat 0 0;
    background-size: cover;
    display: inline-block;
    vertical-align: middle;
    margin-left: 12rpx;
  }
  .view-detail{
      
        font-size: 24rpx;
        color: #F6A51F;
      }
	  .bottom-p{
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		text-align: right;
		padding: 30rpx 60rpx;
		box-sizing: border-box;
		box-shadow: 0 0 10rpx 0 rgba($color: #000000, $alpha: 0.5);
		background: #fff;
	  }
</style>
